<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>分类</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="class_page" id="app">
			<div class="class_box">
				<div class="classify">
					<div class="classify_left">
						<ul class="classify_left_con">
							<li :style="{'background':pageIndex==i ? '#ccc' : ''}" v-for="(item,i) in classifyLeft" :key="i" @click="classTab(i)">{{item.title}}</li>
						</ul>
					</div>
					<div class="classify_right">
						<ul class="goods_list classify_list">
							<li v-for="(item,i) in goodsList" :key="i" @click="goDetail('goods_detail.html?id=' + item.id)">
								<div class="img"><img :src="item.single_pic" alt=""></div>
								<div class="info">
									<h3>{{item.title}}</h3>
									<div class="bot">
										<div class="price">￥{{item.price}}/{{item.num}}支</div>
										<div class="icon"><img :src="item.collect ? '__API__/lib/images/collect.png':'__API__/lib/images/collect2.png'" alt=""></div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				
			</div>
			<!--footer-->
			<div class="fb"></div>
			<div class="footer">
				<div class="li" v-for="(item,i) in navList" :key="i">
					<span @click="goDetail(item.path)">
						<img :src="pageIndex == i ? item.selecticonPath : item.iconPath">
					</span>
					<p :class="{'blue':pageIndex == i}">{{item.title}}</p>
				</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					pageIndex: 1,
					first_id:0,
					navList: [{
							path: 'index.html',
							iconPath: '__API__/lib/images/nav1.png',
							selecticonPath: '__API__/lib/images/nav1_on.png',
							title: '首页'
						},
						{
							path: 'classification.html',
							iconPath: '__API__/lib/images/nav2.png',
							selecticonPath: '__API__/lib/images/nav2_on.png',
							title: '全部'
						},
						{
							path: 'cart.html',
							iconPath: '__API__/lib/images/nav3.png',
							selecticonPath: '__API__/lib/images/nav3_on.png',
							title: '购物车'
						},
						{
							path: 'my.html',
							iconPath: '__API__/lib/images/nav4.png',
							selecticonPath: '__API__/lib/images/nav4_on.png',
							title: '我的'
						}
					],
					classifyLeft: [
						{
							title: '全部商品'
						}
					],
					goodsList: [
					]
				},		created: function() {
					var that = this;


					common.ajax("{:url('GoodsType/all')}",{} , function(res) {
						that.classifyLeft = res.data
						that.first_id=res.first_id
						// that.getData(searchValue);
					})
					common.ajax("{:url('Goods/all')}",{token:localStorage.getItem('token')} , function(res) {
						that.goodsList = res.data

						// that.getData(searchValue);
					})
				},
				methods: {
					classTab(i){
						let that=this
						that.pageIndex = i;
						var id =that.classifyLeft[i].id;
						common.ajax("{:url('Goods/all')}",{token:localStorage.getItem('token'),type_id:id} , function(res) {
							that.goodsList = res.data

							// that.getData(searchValue);
						})
					},
					goDetail(url) {
						common.openUrl(url)
					}
				}
			});
		</script>
	</body>

</html>
